<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-07-21 10:03:47
 * @LastEditTime: 2023-10-22 21:36:21
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/views/main/asset/views/assetOpt.vue
 -->
 <template>
  <div class="asset-opt">
    <div>
      <div class="top-search">
        <CommonSearch
        class="search"
          placeholder="请输入资产数字ID、资产名称"
          @searchFun="searchFun"
        ></CommonSearch>
      </div>
      <group>
        <popup-picker
          :key="1"
          title="资产分类"
          :data="classList"
          :columns="2"
          @on-change="getList"
          v-model="classId"
          show-name
          placeholder="请选择资产分类"
        ></popup-picker>
        <popup-picker
          :key="2"
          title="位置"
          :data="placeList"
          @on-change="getList"
          v-model="place"
          placeholder="请选择位置"
        ></popup-picker>
      </group>
    </div>
    <loading :show="isLoading"></loading>
    <div class="asset-list">
      <template v-if="list.length>0">
        <div class="list">
          <div
            class="item"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="check-content" @click="selectItem(index,item)">
              <check-icon :value="item.check"></check-icon>
            </div>
            <div style="width: 100%;">
              <div class="title" @click="selectItem(index,item)">
                <span :class="`tag-${item.transferState == 1  ? 5 : item.transferState == 2 ? 5 :item.borrowState} tag`">{{
                  getStatus(item.transferState == 1  ? 5 : item.transferState == 2 ? 5 :item.borrowState)
                }}</span>
                <span class="name">{{ item.assetName }}</span>
              </div>
              <div class="label">
                <span class="title">资产数字ID</span>
                <span class="name">{{ item.assetCode }}</span>
              </div>
              <div class="label">
                <span class="title">资产分类</span>
                <span class="name">{{ item.className }}</span>
              </div>
              <div class="label">
                <span class="title">摆放位置</span>
                <span class="name">{{ item.place }}</span>
              </div>
              <x-icon class="icon" type="ios-arrow-forward" @click="toLog(item.assetId)"  size="30"></x-icon>
            </div>
          </div>
        </div>
      </template>
    <template v-else>
      <no-data></no-data>
    </template>
    </div>

    <div class="submit-box">
      <check-icon :value.sync="allCheck" @click.native="changeAllCheck">全选</check-icon>
      <x-button class="submit-btn" @click.native="submit">提交</x-button>
    </div>
  </div>
</template>

<script>
import CommonSearch from "../components/search.vue";
import { Group, PopupPicker, CheckIcon, XButton, Loading } from "vux";
import AssetApi from "@/api/asset.js";
import ManageApi from "@/api/manage.js";
export default {
  components: { CommonSearch, Group, PopupPicker, CheckIcon, XButton, Loading },
  data() {
    return {
      allCheck: false,
      name: "",
      place: [],
      placeList: [],
      list: [],
      selectIdList: [],
      classId: [],
      classList: [],
      type:'',
      isLoading:false,
    };
  },
  mounted() {
    this.type = this.$route.query.type
    this.getList();
    this.assetClass();
    this.findTenPlace();
  },
  methods: {
    toLog(id) {
      this.$router.push({ name: 'log', params: { id: id} });
    },
    //  获取位置列表
    findTenPlace() {
      let _params = {
        pageNum: 1,
        pageSize: 1000
      };
      ManageApi.PlaceFindAll(_params).then((res) => {
       
        if (res.code == "0000") {
          let arr =  res.data.records || [];
          let arr1 = []
          arr.forEach(item => {
            arr1.push(item.place)
          });
          this.placeList = [arr1] || []
          this.placeList[0].unshift('全部')
        }
      });
    },
    // 获取分类列表
    assetClass() {
      let _params = {
        pageNum: 1,
        pageSize: 1000,
      };
      AssetApi.assetClassTree(_params).then((res) => {
        if (res.code == "0000") {
          let _classList = [];
          let resData = res.data;
          for (let i in resData) {
            let temp = {
              name: resData[i].name,
              value: resData[i].id,
              parent: 0,
            };
            _classList.push(temp);
            for (let j in resData[i].children) {
              let temp1 = {
                name: resData[i].children[j].name,
                value: resData[i].children[j].id,
                parent: resData[i].id,
              };
              _classList.push(temp1);
            }
          }
          _classList.unshift({name:'全部分类',value:'',parent:''})
          this.classList = _classList;
        }
      });
    },
    // 全部获取资产列表
    getList() {
      let _params = {
        page: 1,
        pageSize: 10000,
        key:this.name,
        classId: this.classId.length>1?this.classId[1]:"",
        place: this.place.toString(),
      };
      this.isLoading = true
      if(_params.place == "全部")_params.place = ''
      AssetApi.findClassAll(_params).then((res) => {
        this.isLoading = false
        if (res.code == "0000") {
          this.list =
            res.data.records.map((item) => {
              let temp = {
                check: false,
                assetId: item.assetId,
                assetCode: item.assetCode,
                borrowState: item.borrowState,
                assetName: item.assetName,
                className: item.className,
                place: item.place,
                model: item.model,
                brand: item.brand,
                orderId: item.orderId,
                transferState: item.transferState,
              };
              return temp;
            }) || [];
        }
      });
    },
    searchFun(name) {
      this.name = name;
      this.getList();
    },
    selectItem(index,item) {
      this.list[index].check = !this.list[index].check;
      let checkList = this.list.filter((item) => item.check);
      if (checkList.length == this.list.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    changeAllCheck() {
      for (let i in this.list) {
        this.list[i].check = this.allCheck;
      }
    },
    submit() {
      let list = this.list.filter((item) => item.check) || [];
      let orderIdList = list.map((item) => {
        return item.orderId;
      });
      let ids = list.map((item) => {
        return item.assetId;
      });
      let names = list.map((item) => {
        return item.assetName;
      });
      if (list.length == 0) {
        this.$vux.toast.show({
          text: "请选择需要盘点的资产",
          type: "warn",
        });
      } else {
        this.$router.push({
          name: "allReopleInventory",
          params: {
            ids: ids.toString(),
            names:names.toString(),
            assetCode: this.name,
            classId: this.classId.toString(),
            place: this.place.toString(),
          },
          
        });
      }
    },
    getStatus(state) {
      let text = "未出借";
      switch (state) {
        case 0:
          text = "未出借";
          break;
        case 1:
          text = "出借待确认";
          break;
        case 2:
          text = "出借中";
          break;
        case 3:
          text = "归还待确认";
          break;
        case 4:
          text = "未出借";
          break;
        case 5:
          text = "转移待确认";
          break;
        default:
          text = "未出借";
          break;
      }
      return text;
    },
  },
};
</script>

<style lang="less" scoped>
.asset-opt {
  padding-bottom: 50px;
}
.top-search {
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  .search{
    flex: 1;
  }
  .receipt-btn{
    display: flex;
    align-items: center;
    border-radius: 20px;
    font-size:13px;
    width:100px;
    height:32px;
    line-height:32px;
    color:#fff;
    margin-left:10px;
    margin-right:0;
    border-color: rgb(205, 166, 105);
    background: rgb(205, 166, 105);
    img{
      width:20px;
      margin-right:5px;
    }
  }
}
.list {
  height: auto;
  background: #f1f1f1;
  padding: 10px;
  .item {
    position: relative;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    .icon{
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
    .check-content {
      padding-top: 5px;
      padding-right: 5px;
    }
    .title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .tag {
        color: #fff;
        position: relative;
        display: inline-block;
        padding: 0 3px 0 6px;
        font-size: 12px;
        line-height: 20px;
        height: 20px;
        border-radius: 4px 0 0 4px;
        &::after {
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          //   border-top: 8px solid red;
          content: "";
          position: absolute;
          top: 6px;
          right: -14px;
          width: 0;
          z-index: 99;
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
      }
      .tag-1,.tag-4,
      .tag-0 {
        background: rgb(87, 184, 135);
        &::after {
          border-top: 8px solid rgb(87, 184, 135);
        }
      }
      .tag-2 {
        background: rgb(53, 120, 230);
        &::after {
          border-top: 8px solid rgb(53, 120, 230);
        }
      }
      .tag-3 {
        background: rgb(240, 153, 82);
        &::after {
          border-top: 8px solid rgb(240, 153, 82);
        }
      }
      .tag-5 {
        background: rgb(165, 22, 184);
        &::after {
          border-top: 8px solid rgb(165, 22, 184);
        }
      }
      .name {
        display: inline-block;
        margin-left: 20px;
      }
      .more {
        position: absolute;
        right: 0px;
      }
    }

    .label {
      display: flex;
      justify-content: flex-start;
      height: 30px;
      line-height: 30px;
      color: rgb(127, 127, 127);

      .title {
        display: inline-block;
        width: 100px;
      }
    }
  }
}
.submit-box {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  background: #fff;
  .submit-btn {
    width: 150px;
    height: 36px;
    border-radius: 20px;
    color: #fff;
    margin: 0 auto;
    border-color: rgb(205, 166, 105);
    background: rgb(205, 166, 105);
    line-height: 36px;
    font-size: 16px;
  }
}
.no-data{
  text-align: center;
  margin-top:50px;
}
</style>
